import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList, TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper';
//引入
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import Recommend from './Recommend';
import Otherpage from './otherpage';


import app from '../../../app.json';
import Httpc from '../../utils/Httpc';
import REQUEST from '../../../REQUEST';

import styles from './styles';
const { width, height } = Dimensions.get('window')

export default class News extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loaded: false,
            refreshing: false,
            tabShow: false,
            label: ['竞彩'],
            recommendNews: []
        };
    }
    static navigationOptions = {
        title: '彩票资讯',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {

        },
    }
    componentDidMount() {
        this.getRecommendNews();
        setTimeout(() => {
            this.setState({
                tabShow: true
            });
        }, 0)
    }
    getRecommendNews(index) {
        let _this = this;
        let params = {};
        params.rootid = app.rootid;
        params.type = 1;
        params.page = 1;
        params.rows = 4;
        params.recommend = 1;
        Httpc.get(REQUEST.News, params, function (res) {
            _this.setState({
                recommendNews: res.rows
            })
        })
    }
    _on_newsDeatiled = (id) => {
        this.props.navigation.navigate('NewsDetailed', {
            id: id
        });
    }
    renderRecommendNews(lists) {
        var itemArr = [];
        for (var i = 0; i < lists.length; i++) {
            let item = lists[i];
            itemArr.push(
                <TouchableOpacity key={i} onPress={() => this._on_newsDeatiled(item.id)}>
                    <View style={{flexDirection:'column',justifyContent:'flex-start',alignItems:'center'}}>
                        <Image resizeMode="cover" style={styles.bannerImg} source={{ uri: item.headimage }} />
                        <Text style={{position:'absolute',bottom:0,color:'#ffffff',backgroundColor:'rgba(0,0,0,0.5)',width:width, height:40,lineHeight:40,paddingLeft:10}}>{item.title}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    // 滑动tab
    renderScrollableTab = () => {
        let label = this.state.label
        if (this.state.tabShow) {
            return (
                <ScrollableTabView
                    style={{ paddingTop: 8 }}
                    renderTabBar={() =>
                        <ScrollableTabBar
                            style={{ height: 35 }}
                            tabStyle={{ height: 35 }}
                        />
                    }
                    tabBarBackgroundColor='#fff'
                    tabBarActiveTextColor='#b4282d'
                    tabBarInactiveTextColor='#333'
                    tabBarUnderlineStyle={styles.tabBarUnderlines}
                >
                    {
                        label.map((item, index) => {
                            return <Recommend navigation={this.props.navigation} tabLabel={item} key={++index} type={index} />;
                        })
                    }
                </ScrollableTabView>
            )
        }
    }
    render() {
        let tabNames = this.state.tabNames;
        let recommendNews = this.state.recommendNews;
        return (
            <View style={styles.container}>
                <View style={styles.swiper}>
                    <Swiper
                        style={styles.wrapper}
                        showsButtons={false} // 分页风格
                        paginationStyle={styles.paginationStyle}
                        // 点样式
                        dotStyle={styles.dotStyle}
                        // 活动点样式
                        activeDotStyle={styles.activeDotStyle}
                    >
                        {this.renderRecommendNews(recommendNews)}
                    </Swiper>
                </View>

                {this.renderScrollableTab()}
            </View>
        )
    }



}
